import React, { useState } from 'react'
import request from '../../api/request'
import { Button, Grid, NavBar, Popup, Tag, List, Card, Toast, Checkbox } from 'antd-mobile'
import styles from './index.module.css'

import { useLocation, useSearchParams } from 'react-router-dom'
import { useNavigate, useParams } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { Steps } from 'antd-mobile'
import { FileOutline, DeleteOutline } from 'antd-mobile-icons'
function Order() {
  let [sq] = useSearchParams()
  let sw = sq.get('sw')
  let price = sq.get('price')
  const { state } = useLocation('')
  console.log(state);
  const navgetion = useNavigate()
  const { Step } = Steps
  const [visible1, setVisible1] = useState(false)


  const { userpope } = useSelector(state => state.userlist)
  const dispatch = useDispatch()
  return (
    <div>
      <NavBar onBack={() => navgetion(-1)}>标题</NavBar>
      <div>
        <Card>
          <h3 className={styles.swjg}>
            <span>{sw}</span>
            <span>{price}</span>
          </h3>
        </Card>

        <div className={styles.pllist}>
          <Grid columns={3} gap={8}>
            <Grid.Item>
              <div className={styles['grid-demo-item-block']}>{state.start}</div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles['grid-demo-item-block']}>{state.end}</div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles['grid-demo-item-block']}>{state.startTime}</div>
            </Grid.Item>

            <Grid.Item>
              <div className={styles['grid-demo-item-block']}>商务座<b>有票</b></div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles['grid-demo-item-block']}>一等座<b>有票</b></div>
            </Grid.Item>
            <Grid.Item>
              <div className={styles['grid-demo-item-block']}>二等座<b>有票</b></div>
            </Grid.Item>
          </Grid>
          <div className={styles.jtz} onClick={() => { setVisible1(true) }}>
            经停站
          </div>
          <Popup
            visible={visible1}
            onMaskClick={() => {
              setVisible1(false)
            }}
            onClose={() => {
              setVisible1(false)
            }}

          >
            <Steps direction='vertical'>
              {/* <Step title='填写机构信息' status='finish'  description='完成时间：2020-12-01 12:30'/> */}
              <Step title='北京' status='finish' description='完成时间：2020-12-01 12:30' />
              <Step title='天津' status='finish' description='完成时间：2020-12-01 13:30' />
              <Step title='石家庄' status='finish' description='完成时间：2020-12-01 15:30' />
              <Step title='郑州' status='finish' description='完成时间：2020-12-01 17:30' />
              <Step title='武汉' status='finish' description='完成时间：2020-12-01 18:30' />
              <Step title='长沙' status='finish' description='完成时间：2020-12-01 20:30' />
              <Step title='深圳' status='finish' description='完成时间：2020-12-01 22:30' />
              <Step title='广州' status='finish' description='完成时间：2020-12-01 23:30' />
            </Steps>
          </Popup>

        </div>
      </div>

      <div>
        <Button onClick={() => navgetion('/xzcpeope')}>选择乘车人</Button>
        <div>
          {
            userpope.map((item, index) => {
              return <List.Item key={index} description={item.code}
                prefix={<FileOutline onClick={() => edipoo(item)} />}
                extra={
                  <div>
                    <DeleteOutline onClick={() => delpoo(item)} />
                    <div
                      onClick={() => {
                        console.log('点击了')
                      }}
                    >
                      <Checkbox />
                    </div>
                  </div>
                }

              >{item.name}</List.Item>
            })
          }
        </div>

      </div>
    </div>
  )
}

export default Order
